<template>
    <div class="btns">
        <a-button @click="date = new Date()">set date</a-button>
        <a-button @click="startWeek = (startWeek == 7 ? 1 : 7)">set startWeek</a-button>
        <a-button @click="weekType = (weekType == 'cn' ? 'en' : 'cn')">set weekType</a-button>
        <a-button @click="addData">add Data</a-button>
    </div>
    <sa-calendar-toggle class="mcss" v-model:visible="visible" :latticeHeight="50" :isSixRow="false" :startWeek="startWeek"
        :weekType="weekType" v-model:date="date" :data="data" :detailkey="'date'" @onDblClick="handleDay">
        <template #header="{ data }">
            <div class="custom">
                {{ data }}
            </div>
        </template>
        <template #week="{ data, index }">
            {{ data }}
        </template>
        <template #day="{ data, index, row }">
            <div class="mydate">
                <template v-if="startWeek == 1">
                    <template v-if='index == 0'>
                        <div class="mydate-week">{{ moment(new Date(data.year, data.month, data.day)).format("WW") }}</div>
                    </template>
                </template>
                <template v-else>
                    <template v-if='index == 0'>
                        <div class="mydate-week">{{ moment(new Date(row[1].year, row[1].month, row[1].day)).format("WW") }}
                        </div>
                    </template>
                </template>
                <div class="mydate-day" :class="{ 'active': data.active, 'opacity': data.status != 1 }">
                    <div>
                        {{ data.day }}
                    </div>
                    <p>{{ data.detail && data.detail.text }}</p>
                    <nav v-if="data.detail && data.detail.list">
                        <li v-for="v  in data.detail.list" :key="v">{{ v }}</li>
                    </nav>
                </div>
            </div>
        </template>
        <template #toggle>
            <div class="custom" @click="toggleFn">toggle</div>
        </template>
    </sa-calendar-toggle>

    <br>
    <br>
    <br>

    <sa-calendar-toggle v-model:visible="visible2" :latticeHeight="40" :isSixRow="false" :startWeek="1" v-model:date="date"
        :detailkey="'date'">
    </sa-calendar-toggle>
</template>

<script setup lang="ts">
import moment from 'moment';
import { reactive, ref } from 'vue';
let startWeek = ref(7);
let weekType = ref('cn');
let date = ref(new Date());
let data: any = reactive([
    {
        date: '2023-02-11',
        text: '文本内容',
        list: [
            '今天干点什么啊', 'xx活动开启'
        ]
    }
]);
const addData = () => {
    data.push({
        date: moment(new Date()).format("YYYY-MM-DD"),
        text: 'add Text'
    })
}
const handleDay = (item: any) => {
    console.log(item);
}
const setDate = () => {
    date.value = new Date(2022, 10, 10);
}
let visible = ref(false);
const toggleFn = () => {
    visible.value = !visible.value
}

let visible2 = ref(false);
</script>

<style scoped lang="less">
.btns button {
    margin-right: 20px;
}

.mcss {

    .mydate {
        width: 100%;
        height: 100%;
        position: relative;
        user-select: none;
    }

    .mydate-day {
        height: 100%;
        position: relative;
        font-size: 16px;
    }

    .mydate-day div {
        height: 20px;
        line-height: 20px;
        margin: 4px 0px;
    }

    .mydate-day p {
        margin: 0px;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
    }

    .mydate-day:hover nav {
        display: block;
    }

    .mydate-day nav {
        width: 80%;
        height: auto;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 10%;
        background: white;
        box-shadow: 0px 0px 10px pink;
        z-index: 99999999999999999999999;
        display: none;
        padding: 10px;
    }

    .mydate-day nav li {
        height: 20px;
        line-height: 20px;
        text-align: left;
        font-size: 14px;
    }

    .mydate-day nav li+.mydate-day nav li {
        margin-top: 6px;
    }

    :deep .calendarToggle-day-row .calendarToggle-day-row-column {
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

    :deep .calendarToggle-day-row .calendarToggle-day-row-column:nth-last-child(1) {
        border-right: none;
    }

    :deep .calendarToggle-day-row:nth-last-child(1) .calendarToggle-day-row-column {
        border-bottom: none;
    }

    :deep .calendarToggle-day-row_active .calendarToggle-day-row-column {
        border-bottom: none;
    }

    .mydate-week {
        position: absolute;
        font-size: 14px;
        color: pink;
        text-align: center;
        border-right: 1px solid pink;
        cursor: pointer;
        width: 40px;
        left: -40px;
    }

    :deep .calendarToggle-day-row {
        padding-left: 40px;
    }

    :deep .calendarToggle-week {
        padding-left: 40px;
    }

    :deep .calendarToggle-day-row_active {
        background: white;
        box-shadow: 0px 0px 10px #ccc;
    }

    .custom {
        width: 100%;
        text-align: center;
        user-select: none;
    }

    .active div {
        font-size: 20px;
        color: #58241d;
        font-weight: 600;
    }
}

.opacity {
    opacity: .5;
}
</style>